<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-color: black;
            border-width: 1px;
            border-style: solid;
            border-collapse: collapse;
            font-size: 12px;
            width: 600px;
            text-align: center;
        }

        table td,
        th {
            border-color: black;
            border-width: 1px;
            border-style: solid;
        }
    </style>
</head>

<body>
    <p>==============================表格标签：</p>
    <p>table是表格标签，tr是一行，td是单元格，</p>
    <p>th是表头单元格，也是单元格，和普通的td单元格区别是：会居中及加粗显示</p>
    <p>表格属性：align-布局，border-边框 cellpadding-内容与边沿的距离(默认1像素) cellspacing-单元格直接的空白(默认2像素)</p>

    <table align="center">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>趋势</td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="https://www.baidu.com">贴吧</a>
                <a href="https://www.baidu.com">图片</a>
                <a href="https://www.baidu.com">百科</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td>趋势</td>
            <td>124</td>
            <td>675432</td>
            <td>
                <a href="https://www.baidu.com">贴吧</a>
                <a href="https://www.baidu.com">图片</a>
                <a href="https://www.baidu.com">百科</a>
            </td>
        </tr>
    </table>
    <p>表格结构标签thead表格的头部区域，tbody表格的主体区域</p>
    <p>rowspan-跨行合并(最上侧为目标单元格，将代码写里面) colspan-跨列合并(最左侧为目标单元格，将代码写里面)</p>
    <p>1.先确定跨行还是跨列</p>
    <p>2.找到目标单元格，写上合并方式=合并的单元格数量</p>
    <p>3.删除多余单元格</p>
    <br>
    <table border="1" width="300" height="300">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>



</body>

</html>